<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echarts依赖包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 800px;
            height: 400px;
        }
    </style>
</head>

<body>
    <!-- 准备一个容器：容器就是显示图标区域 -->
    <div></div>
</body>

</html>
<script>
    //基于准备好的DOM初始化echarts实例
    let dom = document.querySelector('div');
    //创建echarts实例
    let mycharts = echarts.init(dom);
    //指定图表的配置项与数据
    mycharts.setOption({
        //图表的标题
        title: {
            //主标题的设置
            text: '数据可视化',
            //子标题
            subtext: "echarts基本使用",
            //主标题的颜色
            textStyle: {
                color: 'cyan'
            },
            //设置标题位置
            left: 'center'
        },
        //x轴的配置项
        xAxis: {
            //数据
            data: ["衣服", '直播', '游戏', '电影']
        },
        //y轴的配置项
        yAxis: {
            //显示Y轴的线
            axisLine: {
                show: true
            },
            //显示Y轴刻度
            axisTick: {
                show: true
            }
        },
        //系列的设置：绘制什么样类型的图表、数据的展示在这里设置
        series: [
            //柱状图    
            {
                //图表类型的设置
                type: "bar",
                //图表的数据 bar柱状图  line折线图 pie饼图
                data: [10, 20, 30, 40],
                color: 'red'
            }
            ,
            // 折线图
            {
                type: 'line',
                data: [10, 20, 30, 40],
                color: 'pink'
            },
            //饼图
            {
                type: 'pie',
                //饼图你可以显示文字，data写法如下
                data: [{ name: 'x', value: 10 }, { name: 'y', value: 20 }, { name: 'z', value: 30 }, { name: 't', value: 40 }],
                //饼图的宽度与高度
                width: 150,
                height: 150,
                //饼图位置
                left: 150,
                top: 80,
                //饼图的半径
                radius: 25
            }
        ]
    });
</script>